<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>仪表盘：type=gauge</title>
  <script src="./echarts.js"></script>

  <style lang="css">
    #chart1 {
      width: 1000px;
      height: 650px;
      border: 1px solid red;
      float: left;
    }
  </style>
</head>

<body>
  <div id="chart1"></div>

  <script>
    const myChart1 = echarts.init(document.getElementById('chart1'));
    const option = {
      backgroundColor: '#1b1b1b',
      title: {
        text: '仪表盘',
      },
      tooltip: {
        formatter: '{a}<br />{c} {b}'
      },
      toolbox: {
        feature: {
          saveAsImage: {
            show: true
          }
        }
      },
      series: [
        {
          name: '速度',
          type: 'gauge',
          data: [{ name: 'km/h', value: 40 }],
          radius: '50%',
          startAngle: 225, // 开始角度
          endAngle: -45, // 结束角度
          clockwise: true, // 顺时针
          min: 0,
          max: 220, // 数据的范围，最好data中的value符合这个范围
          splitNumber: 11, // 分割线数量
          splitLine: { // 大的分割线
            show: true,
            length: 25,
            lineStyle: {
              width: 3,
              color: 'rgba(255, 255, 255, 0.2)'
            },
          },
          axisTick: { // 小的刻度线
            show: true,
            splitNumber: 5,
            length: 8,
            lineStyle: {
              color: 'auto', // 值为auto，会取轴线的颜色
              shadowBlur: 10,
              shadowColor: '#fff',
            }
          },
          axisLine: {
            lineStyle: {
              color: [
                [0.09, 'lime'],
                [0.82, '#1c90ff'],
                [1, '#ff4500'],
              ],
              width: 3,
              shadowBlur: 10,
              shadowColor: '#fff',
            },
          },
          axisLabel: {
            fontWeight: 'bold',
            color: '#fff'
          },
          pointer: { // 指针
            show: true,
            length: '70%',
            width: 8,
          },
          itemStyle: { // 指针样式
            borderColor: '#fff',
            shadowBlur: 10,
            shadowColor: '#fff',
          },
          emphasis: { // 只能放itemStyle
            itemStyle: {
              shadowBlur: 20,
            }
          },
          title: {
            show: true,
            fontSize: 20,
            color: '#fff',
            fontWeight: 'bold',
            fontStyle: 'italic',
          },
          detail: {
            fontWeight: 'bold',
            color: '#fff',
            backgroundColor: 'rgba(30,144,255,0.8)',
            borderWidth: 1,
            borderColor: '#fff',
            shadowBlur: 5,
            offsetCenter: [0, '50%'],
          }
        },
        {
          name: '转速',
          type: 'gauge',
          data: [
            {
              name: 'x1000 r/min', value: 1.5
            }
          ],
          radius: '30%',
          center: ['25%', '55%'], // 这个参数文档没写
          endAngle: 45,
          min: 0,
          max: 7,
          splitNumber: 7,
          axisLine: {
            lineStyle: {
              color: [
                [0.29, 'lime'],
                [0.86, '#1c90ff'],
                [1, '#ff4500'],
              ],
              width: 2,
              shadowColor: '#fff',
              shadowBlur: 10,
            }
          },
          splitLine: {
            length: 20,
            lineStyle: {
              width: 3,
              color: '#fff',
              shadowColor: '#fff',
              shadowBlur: 10,
            }
          },
          axisTick: {
            length: 12,
            lineStyle: {
              color: 'auto',
              shadowColor: '#fff',
              shadowBlur: 10,
            }
          },
          axisLabel: {
            fontWeight: 'bold',
            color: '#fff'
          },
          pointer: {
            width: 5,
          },
          title: {
            offsetCenter: [0, '-30%'],
            fontSize: 16,
            color: '#fff',
            fontStyle: 'italic',
          },
          detail: {
            color: '#fff',
            fontWeight: 'bold',
            offsetCenter: [25, '25%'],
          }
        },
        {
          name: '油表',
          type: 'gauge',
          data: [
            { name: 'gas', value: 0.5 }
          ],
          radius: '30%',
          center: ['75%', '50%'], // 这个参数文档没写
          startAngle: 135,
          endAngle: 45,
          min: 0,
          max: 2,
          splitNumber: 2,
          axisLine: {
            lineStyle: {
              color: [
                [0.29, 'lime'],
                [0.86, '#1e90ff'],
                [1, '#ff4500'],
              ],
              width: 2,
              shadowColor: '#fff',
              shadowBlur: 10,
            }
          },
          splitLine: {
            length: 15,
            lineStyle: {
              width: 3,
              color: '#fff',
              shadowColor: '#fff',
              shadowBlur: 10,
            }
          },
          axisTick: {
            length: 12,
            lineStyle: {
              color: 'auto',
              shadowColor: '#fff',
              shadowBlur: 10,
            }
          },
          axisLabel: {
            fontWeight: 'bold',
            color: '#fff',
            formatter (param) {
              console.log(param)
              switch(param) {
                case 0: return 'E'
                case 1: return 'Gas'
                case 2: return 'H'
              }
            },
          },
          pointer: {
            width: 2,
          },
          title: {
            show: false,
          },
          detail: {
            show: false,
          }
        },
        {
          name: '水表',
          type: 'gauge',
          data: [
            { name: 'water', value: 0.5 }
          ],
          radius: '30%',
          center: ['75%', '50%'], // 这个参数文档没写
          startAngle: 315,
          endAngle: 225,
          min: 0,
          max: 2,
          splitNumber: 2,
          axisLine: {
            lineStyle: {
              color: [
                [0.29, 'lime'],
                [0.86, '#1e90ff'],
                [1, '#ff4500'],
              ],
              width: 2,
              shadowColor: '#fff',
              shadowBlur: 10,
            }
          },
          splitLine: {
            length: 15,
            lineStyle: {
              width: 3,
              color: '#fff',
              shadowColor: '#fff',
              shadowBlur: 10,
            }
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontWeight: 'bold',
            color: '#fff',
            formatter (param) {
              console.log(param)
              switch(param) {
                case 0: return 'H'
                case 1: return 'water'
                case 2: return 'C'
              }
            },
          },
          pointer: {
            width: 2,
          },
          title: {
            show: false,
          },
          detail: {
            show: false,
          }
        },
      ],
    }
    myChart1.setOption(option)
    setInterval(() => {
      option.series[0].data[0].value = (Math.random() * 200).toFixed(2) - 0
      option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0
      option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0
      option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0
      myChart1.setOption(option)
    }, 1000)
  </script>
</body>

</html>